<template>
	<div
		v-if="project"
		class="project-detail"
	>
		<!-- 项目信息 -->
		<BasicInfo
			:project="project"
			@updateProject="project=$event"
		/>
		<!-- 主要信息 -->
		<ImportInfo
			:project="project"
			@updateProject="project=$event"
		/>
		<!-- 附件信息 -->
		<Files :project="project" />
		<!-- 评论 -->
		<Comments :project="project" />
		<!-- 购买记录 -->
		<Purchased :project="project" />
	</div>
</template>

<script>
import { getProject } from '@project/api/project'
import BasicInfo from './components/BasicInfo'
import ImportInfo from './components/ImportInfo'
import Files from './components/Files'
import Comments from './components/Comments'
import Purchased from './components/Purchased'

export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'CompProject',
    }
  },
  components: {
    BasicInfo,
    ImportInfo,
    Files,
    Comments,
    Purchased
  },
  data() {
    return {
      project: null,
    }
  },
  created() {
    this.getProjectInfo()
  },
  methods: {
    /**
     * 获取项目信息
     */
    async getProjectInfo() {
      try {
        this.$loading()
        const res = await getProject(this.$route.query.id)

        console.log('项目数据', res.data)

        this.project = res.data
        /* 未评审的项目meaning为null，这里置为100 */
        this.project.meaning = this.project.meaning || 100
        /* tags划分 */
        this.project.tags = this.project.tags.split(' ')
        /* 发布时间格式化 */
        this.project.publishTime = moment(this.project.publishTime).format('YYYY-MM-DD HH:mm')

      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
  }
}
</script>

<style lang="scss">
.project-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  min-width: 1000px;
  padding: 20px;

  .el-form {
    padding: 10px;
    background-color: rgba(64, 158, 255, 0.04);
    border-radius: $radiusMiddle;
    box-shadow: $shadow1;

    h2 {
      margin-bottom: 10px;
    }

    ol {
      margin-left: 15px;
    }

    .el-image {
      cursor: pointer;
      border-radius: 4px;
    }
  }
}
</style>
